<template>
	<div class="index-page test">
		<div class="student1">
			<el-button type="primary" size="small" @click="$router.back(-1);" style='margin-left: 5px;' icon="el-icon-caret-left">返回</el-button>
			<router-link :to="{path:'/admin/holidays',query: {}}" style="mangin-left:20px;">
			<el-button type="warning" size="small" @click="sumbit">保存</el-button>
			</router-link >
		</div>
		<!-- 数据表格展示区域 -->
		<el-table 
			:data="dataList"
			 border 
			 stripe 
			 align="center" 
			 class="admin-table" 
			 sum-text 
			 :row-class-name="tableRowClassName" 
			 @select="checkSelect" 
			 @select-all="checkall">
			<div slot='empty'>
				<img src="../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
				<span style="vertical-align: middle;">暂时还没有内容哦!</span>
			</div>
			<el-table-column 
				:prop="v.prop" 
				:label="v.label" 
				v-for="(v,index) in portTitleList" 
				align="center" 
				show-overflow-tooltip 
				v-if="v.hide != 0" 
				:formatter="v.formatter" 
				:align="v.align || 'center'" 
				:fixed="v.fixed" 
				:class-name="v.columnStyle" 
				:width="v.width" 
				:min-width="v.minWidth" 
				:header-align="v.headerAlign || 'center'">
				<template scope="scope">
					<div slot="reference"  v-if="scope.column.property === 'sm' ">
						<el-input class="content-input" style="height: 40px;" v-model="scope.row[scope.column.property]"></el-input>
						<!-- :disabled="scope.row.type === '物品' && scope.column.property === 'zk' ? true:false" -->
					</div>
					<div slot="reference" v-else-if="scope.column.property === 'rq1'">
						<el-date-picker v-model="scope.row[scope.column.property]" type="date" placeholder="开始日期" @keyup.enter.native="search" icon="search"></el-date-picker>
						<!--<el-date-picker style="height:40px;" range-separator="至" start-placeholder="开始日期"  end-placeholder="结束日期" v-model="scope.row[scope.column.property]" type="daterange"  class="select-block"></el-date-picker>-->
					</div>
					<div slot="reference" v-else-if="scope.column.property === 'rq2'">
						<el-date-picker v-model="scope.row[scope.column.property]" type="date" placeholder="结束日期" @keyup.enter.native="search" icon="search"></el-date-picker>
					</div>

					<div slot="reference" v-else>
						{{ scope.row[scope.column.property] }}
					</div>
				</template>
			</el-table-column>

			<el-table-column label="操作" align="center" width="100px" fixed="right">
				<template scope="scope">
					<el-button size="small" type="danger" @click="componentsShow(v.type,scope)" v-for="v in portBntList">{{v.name}}</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 各个组件显示区域 -->
		<!-- 动画加载 -->
		<LoadingComponent v-show="isLoading"></LoadingComponent>
		<DeleteComponent v-if="portComponents.singleDelete.toggle" @close="componentsHide" :data="portComponents.singleDelete.data"></DeleteComponent>
		<!-- 子路由显示区域 -->
		<router-view class="port-view"></router-view>
	</div>
</template>
<script>
	import Vue from 'vue'
	import { mapState } from 'vuex'
	import LoadingComponent from 'components/loading'
	import DeleteComponent from './del'
	import qs from 'qs'
	export default {
		props: ['params'],
		components: {
			LoadingComponent,
			DeleteComponent,
		},
		data() {
			return {
				vkeyword: '',
				student: '',
				studentList: [],
				date: '',
				ticket: 0,
				studentid: "",
				orderid: '',
				mblist: [],
				mblist2: [],
				yuer: '',
				zfyuer: '',
				lx: '',
				dialogAccounts: false,
				money: {
					xj: '',
					zfbzh: '',
					zfbzhje: '',
					wxzh: '',
					wxzhje: '',
					yhzh: '',
					yhzhje: ''
				},
				/*组件区域*/
				portComponents: {
					singleDelete: {
						type: 'singleDelete',
						toggle: false,
						params: '',
						data: {
							index: '',
							type: 'single',
							title: '此操作将删除该物品, 是否继续?'
						}
					},
					multipleDelete: {
						type: 'multipleDelete',
						toggle: false,
						params: '',
						data: {
							index: '',
							type: 'multiple',
							title: '此操作将删除您选中的班级, 是否继续?'
						}
					},
				},

				multipleDelNum: '', //获取批量选择的数据
				dataList: [], //表格数据

				/*
				    prop :  接口参数名
				    label : 接口中文名
				    hide : 是否隐藏这一列
				    align : 这一列对齐顺序 ： left,right,center
				    headerAlign : 这一列表头对齐方式 ： left,right,center
				    formatter: function (row, column) {}
				*/
				portTitleList: [{
						prop: 'jjrmc',
						label: '节假日名称',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '120',
						minWidth: '',
						headerAlign: 'center'
					},
					{
						prop: 'rq1',
						label: '开始日期',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center'
					},
					{
						prop: 'rq2',
						label: '结束日期',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center'
					},
					{
						prop: 'sm',
						label: '说明',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center'
					},
				],
				portBntList: [ //接口按钮列表
					{
						name: '删除',
						type: 'singleDelete'
					}
				],

				/*动画加载*/
				isLoading: true, //动画加载
				searchLoading: false, //搜索按钮触发按钮动画

				/*分页属性设置*/
				layout: 'total, sizes, prev, pager, next, jumper', //组件布局
				pageindex: 1, //当前分页页码
				pagesizes: [12, 24, 36, 72], //显示个数的选择器选项
				pagesize: 12, //每页显示条目数
				total: 0, //总条数

				dropDownData: '', //
			}
		},
		created() {
			this.$store.dispatch('changeTitle', '批量添加节假日'); //修改title
			this.$store.dispatch('changeRouterIndex', '/admin/jjrtj'); //修改路由
			this.isLoading = true; //动画开始
			this.search()
		},
		//加载页面时调用

		//          this.muban()
		mounted() {
			this.isLoading = false; //动画结束
		},
		methods: {
			search() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params3 = qs.stringify({
					yhid: logininfo.id,
					xxid: logininfo.xxid,
				});
				this.axios.post(this.$store.state.api + 'xxcode/getjjr', params3)
					.then(res => {
//						console.log(res, 321)
						let data = res.data.data;
						let list = data.list;
						this.dataList = list;
						this.searchLoading = false;
					}).catch(res => {
						this.searchLoading = false;
					})
			},
			sumbit() {
				this.dataList.forEach((v, i) => {
					if(v.rq1 == '' || v.rq2 == '') {
						return
					} else {
						var logininfo = JSON.parse(localStorage.logininfo);
						var params3 = qs.stringify({
							jjrmc: v.jjrmc,
							rq1: v.rq1 + '',
							rq2: v.rq2 + '',
							sm: v.sm + '',
							yhid: logininfo.id,
							xxid: logininfo.xxid,
						});
						this.axios.post(this.$store.state.api + 'jjr/insert', params3)
							.then(res => {
								if(res.data.code == 1) {
									this.$store.state.loading = false;
									this.$message.success('保存成功！');
								} else {
									this.$message.warning(res.data.msg);
									this.$store.state.loading = false;
								}
							}).catch(res => {
								this.$message.warning("服务器异常！");
								this.$store.state.loading = false;
							})
					}

				})
			},
			tableRowClassName(row, index) { //隔行变色颜色设置
				/*if ( index%4 == 0) {
				    return "table-cell-green";
				}else if( index%4 == 1 ){
				    return "table-cell-yellow";
				}else if( index%4 == 2 ){
				    return "table-cell-red";
				}else{
				    return "table-cell-blue"
				}*/
			},
//			tableCellControl(scope) { //表格单元格控制CSS样式
//				// console.log(scope)
//				/*if (scope.row.id == 112 && scope.column.property == "iname") {
//				    return {
//				        color:"red",
//				    }
//				}else{
//				    return {
//				        color:"green",
//				    }
//				}*/
//			},
			checkSelect(selection, row) { //点击单选select触发事件
				console.log(selection, row)
				let strID = [];
				selection.forEach(function(v, i) {
					strID.push(v.id)
				})
				this.multipleDelNum = strID.join(",");
			},
			checkall(selection) { //点击全选select触发事件
				let strID = [];
				selection.forEach(function(v, i) {
					strID.push(v.id)
				})
				this.multipleDelNum = strID.join(",");
			},
			/* 组件的弹框  */
			componentsShow(type, data) { //显示组件
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;

						if(this.portComponents[i].data.type == 'single') {
							this.portComponents[i].data.index = data.row.jjrmc

						} else if(this.portComponents[i].data.type == 'multiple') {
							this.portComponents[i].data.index = this.multipleDelNum;

						} else {
							return;
						}
						return;
					}
				}

			},
			componentsHide(setting) { //关闭组件
				for(let i in this.portComponents) {
					if(setting.type == this.portComponents[i].type) {
						this.portComponents[i].toggle = false;
						if(this.portComponents[i].type == 'singleDelete') {
							this.dataList.splice(setting.index, 1)
						}
						if(!setting.cancel) {
							// this.search();
							if(setting.type == "student") {
								this.student = setting.data.zwm + ' - ' + setting.data.xh
								this.studentid = setting.data.id
							} else {

								setting.data.forEach((v) => {

									var iscan = true;
									for(let z in this.dataList) {
										console.log(z, v.id);
										if(this.dataList[z].id == v.id) {
											iscan = false;
											break;
										}
									}
									if(iscan) {
										this.dataList.push(v);
									}
								})
							}
						}
						return;
					}
				}
			}

		},
	}
</script>

<style lang="less" scoped>
	.mb {
		margin-left: 50px;
	}
	
	.test table .el-input__inner {
		height: 40px;
	}
	
	.index-page {
		font-size: 12px;
		position: relative;
		.student1 {
			margin: 10px 0;
			.input {
				width: 200px;
				margin-right: 20px;
			}
		}
		.state {
			width: 100%;
			margin-top: 20px;
			text-align: center;
			.left,
			.right {
				float: left;
				width: 50%;
			}
			h3 {
				// width: 350px;
				text-align: center;
				color: #333;
			}
			.item {
				width: 350px;
				margin: 10px 0;
			}
			.amount {
				font-size: 30px;
				margin-top: 20px;
			}
			.left span {
				display: inline-block;
				width: 100px;
				text-align: right;
				coloe: #737373;
			}
			.right {
				text-align: left;
			}
			.right .item {
				width: 500px;
				.title {
					width: 300px;
				}
				.content {
					width: 150px;
				}
			}
			.right .xj {
				width: 400px;
			}
		}
		.content-input {
			height: 20px;
		}
		.submit {
			width: 120px;
			display: block;
			margin: 20px auto;
		}
		.input {
			min-width: 120px;
			max-width: 150px;
		}
		.item-input {
			width: 200px;
		}
		.total {
			text-align: right;
			margin: 10px 0;
			span {
				margin: 0 10px;
			}
		}
		.dailog .el-dialog {
			width: 70%;
		}
		article {
			margin: 40px 0;
			margin-top: 20px;
			p {
				background: #fcf4eb;
				padding: 10px 5px;
			}
			input {
				border: none;
				outline: none;
				background: transparent;
				border-bottom: 1px solid #ccc;
			}
			div {
				background: rgba(252, 244, 235, 0.7);
				padding: 10px 5px;
			}
			.space-between {
				padding: 10px 0;
				display: block;
			}
		}
		.settlement {
			p {
				background: #fcf4eb;
			}
			div {
				background: rgba(252, 244, 235, 0.7);
			}
		}
		.receiving-account {
			p {
				background: #F1FDFC;
			}
			div {
				background: rgba(241, 253, 252, 0.7);
			}
		}
		.other-information {
			p {
				background: #e5e9f2;
			}
			div {
				background: rgba(229, 233, 242, 0.7);
			}
		}
	}
</style>